<template>
<div>
  <div>
  <common-title :stitle="alldata.title"/>
    </div>
  <!--  <div :id="'tw' + alldata.itemid" style="height: 87%;"></div>-->
  <div :id="'linebarchart' + alldata.itemid" style="height:300px"></div>
  </div>

</template>

<script>
  import * as echarts from 'echarts'

  import commonTitleMixin from '../mixins/commonTitleMixin'
  export default {
    name: 'linebarchart',
    props: ['alldata'],
    mixins: [commonTitleMixin],
    mounted () {
      this.init()
    },
    methods: {
      init: function () {
        var iflegend = this.alldata.iflegend
        var nametxt = ''
        if (iflegend) {
          nametxt = this.alldata.nametxt
        }
        var ynametxt = this.alldata.ynametxt
        // var title = this.alldata.title

        var seriesval = this.alldata.seriesval
        var seriestxt = this.alldata.seriestxt
        var inter = this.alldata.interval
        inter = parseInt(inter)
        var serie = []
        for (var i = 0; i < seriesval.length; i++) {
          var item
          if (iflegend === 'true') {
            item = {
              name: nametxt[i],
              yAxisIndex: seriestxt[i][0],
              type: this.alldata.shape,
              data: seriesval[i],
              smooth: true
            }
          } else {
            item = {
              yAxisIndex: seriestxt[i][0],
              type: this.alldata.shape,
              data: seriesval[i],
              smooth: true
            }
          }
          serie.push(item)
        }
// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('linebarchart' + this.alldata.itemid))
         // var colors = ['#ee6666', '#fc8452', '#fac858'];
        // /* var colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']; */
        var colors = this.alldata.colors

// 指定图表的配置项和数据
        var option
        if (this.alldata.xja2.length > 0) {
          option = {
            // title: {
            //   text: title
            // },
            color: colors,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                restore: {
                  show: true
                },

                // 各工具配置项
                dataView: {
                  show: true,
                  readOnly: false,
                  optionToContent: function (opt) {
                    var axisdata = opt.xAxis[0].data
                    var series = opt.series
                    var table = '<table class="layui-table"><tbody><tr class="">' +
                      '<td class="">' + '' + '</td>' +
                      '<td class="">' + series[0].sname + '</td>' +
                      '<td class="">' + series[1].sname + '</td>' +
                      '<td class="">' + series[2].sname + '</td>' +
                      '</tr>'
                    for (var i = 0, l = series[0].data.length; i < l; i++) {
                      table += '<tr class="">' +
                        '<td class="">' + axisdata[i].value + '</td>' +
                        '<td class="">' + series[0].data[i].value + '</td>' +
                        '<td class="">' + series[1].data[i].value + '</td>' +
                        '<td class="">' + series[2].data[i].value + '</td>' +
                        '</tr>'
                    }
                    table += '</tbody></table>'
                    return table
                  }
                }, // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                magicType: {
                  show: true,
                  type: ['bar', 'line']
                }, // 动态类型切换
                saveAsImage: {
                  show: false
                }, // 保存为图片
                right: 10,
                showTitle: false
              }
            },
            grid: {
              left: '3%',
              right: '0%',
              bottom: '3%',
              containLabel: true
            },
            legend: {
              data: nametxt
            },
            dataZoom: [
              {
                type: 'slider', // slider表示有滑动块的，inside表示内置的
                show: true,
                height: 20,
                xAxisIndex: [0],
                start: 60,
                end: 100
              }
            ],
            xAxis: [
              {
                type: 'category',
                data: this.alldata.xja2,
                axisPointer: {
                  type: 'shadow'
                },
                axisTick: { length: 20 },
                axisLabel: {
                  show: true,
                  interval: inter,
                  formatter: function (value) {
                    var ret = ''// 拼接加\n返回的类目项
                    var maxLength = 1// 每项显示文字个数
                    var valLength = value.length// X轴类目项的文字个数
                    var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
                    if (rowN > 1) { // 如果类目项的文字大于4,
                      for (var i = 0; i < rowN; i++) {
                        var temp = ''// 每次截取的字符串
                        var start = i * maxLength// 开始截取的位置
                        var end = start + maxLength// 结束截取的位置
                        // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                        temp = value.substring(start, end) + '\n'
                        ret += temp // 凭借最终的字符串
                      }
                      return ret
                    } else {
                      return value
                    }
                  }
                }
              },
              {
                type: 'category',
                data: this.alldata.xja1,
                axisPointer: {
                  type: 'shadow'
                },
                position: 'bottom',
                offset: 65,
                axisLabel: {
                  show: true,
                  interval: 3
                },
                axisTick: { length: 50 },
                splitArea: {
                  show: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: ynametxt[0],
                offset: 1,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                },
                minInterval: 1
              },
              {
                type: 'value',
                name: ynametxt[1],
                min: 0,
                offset: -9,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                },
                minInterval: 1
              }
            ],
            series: serie
          }
        } else {
          // let start = 0
          // 先写死
          // let widthval = 18
          // start = (this.alldata.xja1.length - widthval) / this.alldata.xja1.length * 100
          option = {
            // title: {
            //   text: title
            // },
            color: colors,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                restore: {
                  show: false
                },
                // 各工具配置项
                dataView: {
                  show: false,
                  readOnly: false,
                  optionToContent: function (opt) {
                    var axisdata = opt.xAxis[0].data
                    var series = opt.series
                    var table = '<table class="layui-table"><tbody><tr class="">' +
                      '<td class="">' + '' + '</td>' +
                      '<td class="">' + series[0].sname + '</td>' +
                      '<td class="">' + series[1].sname + '</td>' +
                      '<td class="">' + series[2].sname + '</td>' +
                      '</tr>'
                    for (var i = 0, l = series[0].data.length; i < l; i++) {
                      table += '<tr class="">' +
                        '<td class="">' + axisdata[i].value + '</td>' +
                        '<td class="">' + series[0].data[i].value + '</td>' +
                        '<td class="">' + series[1].data[i].value + '</td>' +
                        '<td class="">' + series[2].data[i].value + '</td>' +
                        '</tr>'
                    }
                    table += '</tbody></table>'
                    return table
                  }
                }, // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                magicType: {
                  show: true,
                  type: ['bar', 'line'],
                  title: {
                    line: '切换为折线图',
                    bar: '切换为柱状图'
                  }
                }, // 动态类型切换
                saveAsImage: {
                  show: false
                }, // 保存为图片
                right: 10,
                showTitle: false
              }
            },
            grid: {
              left: '3%',
              right: '0%',
              bottom: '3%',
              containLabel: true
            },
            legend: {
              data: nametxt
            },
            dataZoom: [
              {
                type: 'slider', // slider表示有滑动块的，inside表示内置的
                /* type:'inside',//slider表示有滑动块的，inside表示内置的 */
                show: true,
                xAxisIndex: [0],
                start: 0,
                brushSelect: false,
                end: 100
              },
              {
                /* type:'slider',//slider表示有滑动块的，inside表示内置的  */
                type: 'inside', // slider表示有滑动块的，inside表示内置的
                show: true,
                xAxisIndex: [0],
                start: 0,
                brushSelect: false,
                end: 100
              }
            ],

            xAxis: [
              {
                type: 'category',
                data: this.alldata.xja1,
                axisPointer: {
                  type: 'shadow'
                },
                position: 'bottom',
                splitNumber: 100,
                axisLabel: {
                  show: true,
                  interval: inter,
                  rotate: 30
                },
                axisTick: { length: 10 },
                splitArea: {
                  show: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: ynametxt[0],
                offset: 1,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                },
                minInterval: 1
              },
              {
                type: 'value',
                name: ynametxt[1],
                min: 0,
                offset: -9,
                axisLabel: {
                  formatter: '{value}'
                },
                splitLine: {
                  show: false
                },
                minInterval: 1
              }
            ],
            series: serie
          }
        }
        option.legend.show = iflegend
// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      }
    }
  }
</script>

<style scoped>

</style>
